<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/style.css"/>
    <script type="text/javascript" src="__PUBLIC__/Js/jquery.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Js/jquery.sorted.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Js/bootstrap.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Js/ckform.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }

        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }

        .sub {
            margin: 20px 0px 0px 50px;
            width: 230px;
            background: #FFF;
            float: left;
            border-top: 5px #1A78C1 solid

        }

        .sub a {
            text-decoration: none;
        }

        .fixed {
            width: 230px;
            height: auto;
            padding-bottom: 10px;
            padding-top: 6px;
            background: #FFF;
            font: normal 13px/30px 微软雅黑;
            text-align: center;
            top: 0px;
            filter: progid:DXImageTransform.Microsoft.Shadow(color=#909090, direction=120, strength=2);
            -moz-box-shadow: 1px 1px 5px #909090;
            -webkit-box-shadow: 1px 1px 5px #909090;
            box-shadow: 1px 1px 5px #909090;
        }

        .menu_left {
            clear: both;
            margin: auto;
            margin-top: 5px;
            height: 40px;
            width: 215px;
            background: #e9e4d3;
            letter-spacing: 2px;
            font: 14px/40px 微软雅黑;
            color: #000;
            text-decoration: none;
        }

        .button_check {
            background: #8fb9fe;
            background: #f3d333;
            font: 14px/40px 微软雅黑;
            color: #FFF;
            border: 1px #f3d333 solid;
        }


    </style>
</head>
<body>
<div class="definewidth m10">
    <div class="navbar definewidth m10">
        <div class="navbar-inner">
            <a class="brand">分类列表</a>
            <button style="float:right" type="button" class="btn btn-success" id="addnew">添加分类</button>
        </div>
    </div>
</div>
<div class="sub">
    <div class="fixed">
        <a href="" target="_self" class="class_controller" classid="1">
            <div class="menu_left ">通知公告</div>
        </a>
        <a href="" target="_self" class="class_controller" classid="2">
            <div class="menu_left button_check">综合新闻</div>
        </a>

    </div>
</div>
<div style="float:left;width:900px;margin: 10px 0 0 0">
    <table class="table table-bordered table-hover definewidth m10" classid="class_1">
        <thead>
        <tr>
            <th width="10%">分类序号</th>
            <th width="35%">分类名称</th>
            <th width="35%">所属父灰</th>
            <th>操作</th>
        </tr>
        </thead>
        <tr>
            <td>5</td>
            <td>通知</td>
            <td>通知公告</td>
            <td>
                <a href="edit.html" onclick="javascript:del(1)">编辑</a>

            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>通知</td>
            <td>通知公告</td>
            <td>
                <a href="edit.html" onclick="javascript:del(1)">编辑</a>

            </td>
        </tr>
    </table>
    <table class="table table-bordered table-hover definewidth m10" classid="class_2" style="display:none">
        <thead>
        <tr>
            <th width="10%">分类序号</th>
            <th width="35%">分类名称</th>
            <th width="35%">所属父灰</th>
            <th>操作</th>
        </tr>
        </thead>
        <tr>
            <td>6</td>
            <td>通知</td>
            <td>通知公告</td>
            <td>
                <a href="edit.html" onclick="javascript:del(1)">编辑</a>

            </td>
        </tr>
        <tr>
            <td>6</td>
            <td>通知</td>
            <td>通知公告</td>
            <td>
                <a href="edit.html" onclick="javascript:del(1)">编辑</a>

            </td>
        </tr>
    </table>
</div>
</body>
</html>
<script language="JavaScript" type="text/javascript">
    $(document).ready(function () {
        $(".class_controller").click(function () {

            var newsclassid = $(this).attr("classid");
            var fs = 'class_' + newsclassid;
            //alert(fs);
            $(".menu_left").removeClass("button_check");
            $(this).children("div").addClass("button_check");

            $("table").css("display", "none");
            $("table[classid='class_" + newsclassid + "']").css("display", "table");
            return false;
        });
        $('#addnew').click(function () {

            window.location.href = "add.html";
        });


    });
</script>